﻿<%@ Page Title="Point of Sale System" Language="C#" MasterPageFile="~/Site.master"
    AutoEventWireup="true" EnableEventValidation="false" CodeBehind="Ventas.aspx.cs"
    Inherits="POSGui.Presentacion.Ventas" %>

<%@ Import Namespace="POSGui" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link href="../GUIComponents/Autosuggest/autosuggest.css" rel="stylesheet" type="text/css" />
    <script src="../GUIComponents/Autosuggest/autosuggest.js" type="text/javascript"></script>
    <script type="text/javascript">

        var currentRowId = -1;
        var custom_array = [];
        var needToConfirm = true;

        /**
        Función que permite seleccionar una última row
        */
        function MarkRow(rowId) {

            if (document.getElementById(rowId) == null)
                return;

            if (document.getElementById(currentRowId) != null)
                document.getElementById(currentRowId).style.backgroundColor = '#ffffff';

            //Obtiene la fila seleccionada
            var rows = document.getElementById('<%= GridVenta.ClientID %>').rows
            var selectedRow = rows[rowId + 1];

            //Colorea la fila seleccionada
            document.getElementById(rowId).style.backgroundColor = '#E7F5C0';

            //Coloca el focus en la fila la primera celda de la fila seleccionada
            selectedRow.cells[0].children[0].focus();

            //Actualiza el codigo del panel principal
            document.getElementById('<%= currentProductImage.ClientID %>').src = "../Handler.ashx?id=" + selectedRow.cells[1].innerHTML;

            //Actualiza el nombre del panel principal
            document.getElementById('<%= detallesNombre.ClientID %>').innerHTML = selectedRow.cells[2].innerHTML;

            //Actualiza el precio del panel principal
            document.getElementById('<%= detallesPrecio.ClientID %>').innerHTML = "¢" + selectedRow.cells[3].innerHTML + " c/u";

            currentRowId = rowId;
        }

        /**
        Función que permite manejar los eventos del teclado
        */
        function keyalert(event) {
            var event = window.event || event
            var key = event.keyCode;

            switch (key) {
                case 38:
                    MarkRow(currentRowId - 1);
                    break;
                case 40:
                    MarkRow(currentRowId + 1);
                    break;
            }
        }

        /**
        Función que permite guardar el valor del cuadro de texto
        */
        function SetHiddenValue() {

            var str = document.getElementById('TextoCodigo').value;
            document.getElementById('<%= hidden1.ClientID %>').value = str;
        }

        /**
        * Función que permite seleccionar el valor que se va a eliminar de la tabla de productos
        */
        function SetHiddenRowValue(control) {
            var id = control.id;
            var token = id.split("_");
            var confirmation = confirm("Esta seguro de borrar este producto");
            if (confirmation) {
                document.getElementById('<%= hidden3.ClientID %>').value = token.pop();
                return true;
            } else {
                return false;
            }
        }

        /**
        * Funcion que genera un numero random para evitar que dos postback ingresen productos 
        */
        function onPostBack() {
            needToConfirm = false;
            var rand = generateRandomSequence();
            document.getElementById('<%= postbacktext.ClientID %>').value = rand;
            SetHiddenValue();
        }

        function generateRandomSequence() {
            var g = "";
            for (var i = 0; i < 32; i++)
                g += Math.floor(Math.random() * 0xF).toString(0xF)
            return g;
        }


        /**
        Función que permite mostrar un cuadro de diálogo
        */
        function showModalPopupViaClient() {
            //ev.preventDefault();
            var modalPopupBehavior = $find('<%= MensajeSalir.ClientID %>');
            if (needToConfirm) {
                modalPopupBehavior.show();
                return false;
            }
            return true;
        }

        /**
        Función que permite ocultar un cuadro de diálogo
        */
        function hideModalPopupViaClient() {
            var modalPopupBehavior = $find('<%= MensajeSalir.ClientID %>');
            modalPopupBehavior.hide();
        }

        /**
        Funcion que permite mostrar una alerta al usuario
        */
        function displayAlert(message) {
            alert(message);
            return true;
        }

        /**
        Función que permite mostrar un cuadro de diálogo a la hora de salir
        */
        function confirmExit(e) {
            if (!e) e = window.event;
            var modalPopupBehavior = $find('<%= MensajeSalir.ClientID %>');
            if (needToConfirm) {
                modalPopupBehavior.show();
                return false;
            }
            return true;
        }

        /**
        Función que permite realizar una edicion de los productos
        */
        function onQuantityEdit() {

            //Obtiene el valor de a fila seleccionada
            var rows = document.getElementById('<%= GridVenta.ClientID %>').rows
            var selectedRow = rows[currentRowId + 1];
            var newQuantity = selectedRow.cells[0].children[0].value;
            document.getElementById('<%= hidden3.ClientID %>').value = currentRowId + "_" + newQuantity;

            //Crea un nuevo identificador para el postback
            onPostBack();

            //Llama al evento por medio de un boton oculto
            document.getElementById('<%= BtnHidden.ClientID %>').click();
            return true;
        }

        
        /**
        Funcíon que permite verificar las existencias del carrito
        */
        function enoughProducts() {
            //Obtiene la fila seleccionada
            var grid = document.getElementById('<%= GridVenta.ClientID %>')
            if (grid == null) {
                alert('Por favor ingrese productos al carrito');
                return false;
            }
            var rows = grid.rows;
            if (rows.length >= 1)
                return true;
            else {
                alert('Por favor ingrese productos al carrito');
                return false;
            }
        }

        /**
        Funcion que verifica si hay suficientes productos para pausar la venta
        */
        function enoughProductsToPause() {
            var enough = enoughProducts();
            if (enough) {
                return confirm('¿Esta seguro que desea pausar la venta actual?');
            } else
                return enough;
        }




        // registra el evento de onkeyup a la función keyalert
        document.onkeyup = keyalert;

    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <input id="hidden1" type="hidden" runat="server" />
    <input id="hidden2" type="hidden" runat="server" />
    <input id="hidden3" type="hidden" runat="server" />
    <asp:Button ID="BtnHidden" Style="display: none" runat="server" OnClick="RowEdited">
    </asp:Button>    
    <ajaxtoolkit:modalpopupextender ID="MensajeConfirmacion" runat="server" TargetControlID="hidden2"
        BackgroundCssClass="modalBackground" CancelControlID="btnClose" PopupControlID="PopUpPanel"
        OkControlID="btnOk" OnCancelScript="return false;" OnOkScript="return true;"
        DropShadow="True">
    </ajaxtoolkit:modalpopupextender>
    <asp:Panel ID="PopUpPanel" runat="server" CssClass="modalPopup" Style="display: none;">
        <asp:Label ID="Label1" runat="server" Text="Existe una venta pendiente en el sistema, ¿Desea continuarla?"></asp:Label>
        <div style="text-align: right; width: 100%; margin-top: 5px;">
            
        </div>
    </asp:Panel>
    <ajaxtoolkit:modalpopupextender ID="MensajeSalir" runat="server" TargetControlID="hidden2"
        BackgroundCssClass="modalBackground" CancelControlID="btnClose" PopupControlID="PanelConfirmacion"
        OkControlID="btnOk" OnCancelScript="return false;" OnOkScript="return true;"
        DropShadow="True">
    </ajaxtoolkit:modalpopupextender>
    <asp:Panel ID="PanelConfirmacion" runat="server" CssClass="modalPopup" Style="display: none;">
        <asp:Label ID="Label2" runat="server" Text="Existe una venta pendiente en curso, ¿Desea guardarla en el sistema?"></asp:Label>
        <div style="text-align: center; width: 100%; margin-top: 5px;">
            <asp:Button ID="LogOffSavingSale" runat="server" Text="Si" Width="50px" OnClick="ConfirmLeaveSavingSale"
                UseSubmitBehavior="False" />
            <asp:Button ID="LogOffWithoutSave" runat="server" Text="No" Width="50px" OnClick="ConfirmLeaveWithoutSavingSale"
                UseSubmitBehavior="False" />
            <asp:Button ID="btnCancel" runat="server" Text="Cancelar" Width="50px" OnClientClick="hideModalPopupViaClient();" />
        </div>
    </asp:Panel>
    <h2>
        Módulo de Ventas</h2>
    <div id="PanelDetails">
        <div id="detailsHeader">
            <img src="../Graphics/Sales/DetailTop.jpg" width="309" height="28" alt="Detalles de Venta" />
        </div>
        <div id="productDetails">
            <div id="productDetailsImage">
                <asp:Image ID="currentProductImage" runat="server" Width="160" Height="160" ImageUrl="~/Graphics/Sales/NoImage.jpg" />
            </div>
            <div id="productDetailsInfo">
                <asp:Label ID="detallesNombre" runat="server" Width="257px"></asp:Label>
                <br />
                <br />
                <asp:Label ID="detallesPrecio" runat="server" Width="258px"></asp:Label>
            </div>
        </div>
        <div id="instructionsDetails">
            <div id="instructionsDetailsText">
                ##: AGREGAR PRODUCTO<br />
                ##: ELIMINAR PRODUCTO SELECCIONADO<br />
                ##: PAGAR<br />
                ##: CANCELAR VENTA
            </div>
        </div>
        <div id="detalisFooter">
            <img src="../Graphics/Sales/DetailBottom.jpg" alt="" />
        </div>
    </div>
    <div id="Sale">
        <div id="saleInformation">
            <div>
                <img src="../Graphics/Sales/SystemInfoTop.jpg" alt="" />
            </div>
            <div id="saleInformationContent">
            </div>
            <div>
                <img src="../Graphics/Sales/SystemInfoBottom.jpg" alt="" />
            </div>
            <div id="saleInformationContentText">
                Caja:<asp:Label ID="CashierLabel" runat="server" Text=" "></asp:Label>
                <br />
                <br />
                Vendedor:<asp:Label ID="SellerLabel" runat="server" Text=" "></asp:Label>
                <br />
                <br />
                Fecha:<asp:Label ID="DateLabel" runat="server"></asp:Label>
            </div>
        </div>
        <div class="SaleMenu">
            <asp:ImageButton CssClass="ButtonSalesStyle" ID="FinalizarBtn" OnClientClick="return enoughProducts();"
                OnClick="FinishCurrentSale" runat="server" ImageUrl="~/Graphics/Sales/IconosMenu/Iconos_finalizar.jpg">
            </asp:ImageButton>
            <asp:ImageButton CssClass="ButtonSalesStyle" ID="CancelarBtn" OnClientClick="return confirm('¿Está seguro que desea cancelar la venta actual?');"
                OnClick="ConfirmLeaveWithoutSavingSale" runat="server" ImageUrl="~/Graphics/Sales/IconosMenu/Iconos_cancelar.jpg">
            </asp:ImageButton>
        </div>
        <div id="saleNewProduct">
            <asp:Table ID="Table1" runat="server" Width="493px">
                <asp:TableRow>
                    <asp:TableCell>Código:</asp:TableCell>
                    <asp:TableCell>
                        <input id="TextoCodigo" value="" autocomplete="off" />
                        <input id="postbacktext" type="hidden" runat="server" />
                        <script type="text/javascript">                            new autosuggest("TextoCodigo", custom_array); </script>
                    </asp:TableCell>
                    <asp:TableCell HorizontalAlign="Right" Width="100">Cantidad:</asp:TableCell>
                    <asp:TableCell HorizontalAlign="Right">
                        <asp:TextBox ID="TextoCantidad" runat="server" Width="30" autocomplete="off" TargetControlID="TextoCantidad"
                            ValidationGroup="IngresoProductoValidation"></asp:TextBox>
                    </asp:TableCell>
                    <asp:TableCell>
                        <asp:RegularExpressionValidator ControlToValidate="TextoCantidad" ID="NumberValidator"
                            CssClass="failureNotification" runat="server" ValidationGroup="IngresoProductoValidation"
                            ErrorMessage="Utilice solamente números enteros" ValidationExpression="^[1-9]+\d*$"
                            SetFocusOnError="True"></asp:RegularExpressionValidator>
                        <ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server"
                            TargetControlID="NumberValidator" HighlightCssClass="validatorCalloutHighlight">
                        </ajaxToolkit:ValidatorCalloutExtender>
                    </asp:TableCell>
                    <asp:TableCell HorizontalAlign="Right" Width="130">
                        <asp:Button ID="AddProductButton" runat="server" Text="Agregar" Width="90" OnClientClick="onPostBack();"
                            OnClick="AddProduct" CausesValidation="true" ValidationGroup="IngresoProductoValidation" />
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>
        </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="AddProductButton" />
            </Triggers>
            <ContentTemplate>
                <div id="saleProducts">
                    <asp:GridView ID="GridVenta" runat="server" OnRowDataBound="RowBound" Width="494px"
                        HeaderStyle-BackColor="#9abb39" HeaderStyle-ForeColor="Black" RowStyle-ForeColor="Black"
                        RowStyle-BorderColor="Black" HeaderStyle-BorderColor="Black" RowStyle-HorizontalAlign="Center"
                        Font-Size="13" AutoGenerateColumns="false">
                        <Columns>
                            <asp:TemplateField HeaderText="Cantidad" HeaderStyle-Width="10">
                                <ItemTemplate>
                                    <asp:TextBox Width="30px" ID="TextoCantidadProducto" runat="server" Text='<%# Bind("Cantidad") %>'
                                        autocomplete="off" onChange="onQuantityEdit();"></asp:TextBox>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField HeaderText="Código" DataField="Codigo" HeaderStyle-Width="100"></asp:BoundField>
                            <asp:BoundField HeaderText="Nombre" DataField="Nombre" HeaderStyle-Width="80"></asp:BoundField>
                            <asp:BoundField HeaderText="Precio" DataField="PrecioPorUnidad" HeaderStyle-Width="60">
                            </asp:BoundField>
                            <asp:BoundField HeaderText="Total" DataField="PrecioTotal" HeaderStyle-Width="60">
                            </asp:BoundField>
                            <asp:TemplateField HeaderStyle-Width="16px">
                                <ItemTemplate>
                                    <asp:ImageButton Width="16px" ID="BotonDelete" runat="server" OnClientClick="return SetHiddenRowValue(this);"
                                        OnClick="RowDeleted" ImageUrl="~/Graphics/Sales/delete.png" />
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </div>
                <div id="saleTotal">
                    <asp:Table ID="Table2" runat="server" Width="492px" Height="100px">
                        <asp:TableRow Height="15">
                            <asp:TableCell Width="200" HorizontalAlign="Right">Subtotal:</asp:TableCell><asp:TableCell
                                Width="292" HorizontalAlign="Right">
                                <asp:Label ID="SubtotalLabel" runat="server" Text="¢ 0.0"></asp:Label></asp:TableCell></asp:TableRow>
                        <asp:TableRow Height="20">
                            <asp:TableCell Width="200" HorizontalAlign="Right">Impuestos:</asp:TableCell>
                            <asp:TableCell Width="292" HorizontalAlign="Right">
                                <asp:Label ID="ImpuestosLabel" runat="server" Text="¢ 0.0"></asp:Label>
                            </asp:TableCell></asp:TableRow>
                        <asp:TableRow Height="60">
                            <asp:TableCell Width="200" HorizontalAlign="Right" Font-Size="30" ForeColor="#EE670D">TOTAL:</asp:TableCell>
                            <asp:TableCell Width="292" HorizontalAlign="Right" Font-Size="30" ForeColor="#EE670D">
                                <asp:Label ID="TotalLabel" runat="server" Text="¢ 0.0"></asp:Label>
                            </asp:TableCell></asp:TableRow>
                    </asp:Table>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Content>
